<template>
  <div class="template-content">
    <Row :gutter="4">
      <Col span="3"><Input placeholder="名称" v-model="queryParam.where.docName"></Input> </Col>
      <Col span="3"><Orgselect ref="srhOrgSelect" width="200px" ></Orgselect> </Col>
      <Col span="3"><Dateselect ref="uploadTime" v-model="dateRange" placeholder="上传日期"></Dateselect> </Col>
      <Col span="1"><Button type="primary" icon="ios-search" @click="getTable">查询</Button></Col>
    </Row>
    <Card>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" size="small" Title="播放" icon="md-play"  style="margin-right: 3px" @click="play(row)"></Button>
          <Button type="default" size="small" title="编辑" icon="md-create" style="margin-right: 3px" @click="edit(row)"></Button>
          <Button type="default" size="small" title="删除" icon="md-close" style="margin-right: 3px" @click="remove(row)"></Button>
          <Button type="default" size="small" title="下载" icon="md-download" @click="download(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="fileType">
          <Button type="success" size="small" v-if="row.fileType==1">视频</Button>
          <Button type="error" size="small" v-if="row.fileType==2">音频</Button>
          <Button type="default" size="small" v-if="row.fileType==3">图片</Button>
          <Button type="default" size="small" v-if="row.fileType==3">其它</Button>
        </template>
        <template slot-scope="{ row, index }" slot="importance">
          <Button type="success" size="small" v-if="row.importance==1">普通</Button>
          <Button type="error" size="small" v-if="row.importance==2">重要</Button>
          <Button type="default" size="small" v-if="row.importance==3">特别重要</Button>
        </template>
      </Table>
      <!--      <Page class="panel-page" :total="queryParam.page.total" :current="queryParam.page.pages" :page-size="queryParam.page.size" @on-change="changePage" show-elevator show-sizer show-total />-->
      <MyPage v-model="queryParam.page" @changePage="changePage"></MyPage>
    </Card>

    <VedioPlayer ref="vedioPlayer" ></VedioPlayer>

  </div>
</template>
<script>
import {searchPage} from '@/api/document';
import Orgselect from "_c/topnav/OrgSelect";
import Dateselect from "_c/topnav/date2select"
import MyPage from "_c/topnav/TopnavPage";
import {apiResult} from "@/libs/util";
export default {
  name: "document",
  components:{Orgselect,Dateselect,MyPage},
  data(){
    return{
      playModal:false,
      player: null,
      dateRange: [],
      tableData:[],
      queryParam: {
        page: {
          desc: ['update_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {docName: null, orgId: null, updateTimeBegin:null,updateTimeEnd:null},
      },
      columns:[
        {title: '操作', key: 'action', width: 180,slot: 'action',align: 'center'},
        {title: '文件名', key: 'docName', resizable: true,sortable: true, width: 400},
        {title: '类型', key: 'fileType', sortable: true, slot: 'fileType',align: 'center', width: 80},
        {title: '文件长度', key: 'fileSize', sortable: true, width: 100},
        {title: '时长', key: 'duration', sortable: true, width: 80},
        {title: '拍摄时间', key: 'startTime',width: 150},
        {title: '上传时间', key: 'uploadTime',width: 150},
        {title: '所属机构', key: 'orgName', sortable: true,width: 100},
        {title: '人员', key: 'userName', sortable: true,width: 100},
        {title: '拍摄设备', key: 'deviceName', sortable: true,width: 100},
        {title: '存储位置', key: 'siteName', sortable: true,width: 100},
        {title: '存放路径', key: 'docUri', sortable: true, width: 150},
        {title: '重要程度', key: 'fileType', sortable: true, slot: 'importance',align: 'center', width: 80},
        {title: '文件编号', key: 'docNo', sortable: true, width: 150},
      ],
    }
  },
  methods:{
    getTable(){
      this.tableData = [];
      /** 生成查询条件 */
      this.queryParam.where.updateTimeBegin = null;
      this.queryParam.where.updateTimeEnd = null;
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0]=="")){
        this.queryParam.where.updateTimeBegin = this.dateRange[0];
        this.queryParam.where.updateTimeEnd = this.dateRange[1];
      }
      this.queryParam.where.orgId = this.$refs.srhOrgSelect.getValue();

      //this.queryParam.where.type=1;
      searchPage(JSON.stringify(this.queryParam)).then(res => {
          this.tableData = [];
          apiResult(res.data,false,result=>{
            this.queryParam.page.total=result.data.total;
            this.tableData = result.data.records;
          })
      })
    },
    play(row){
      this.$refs.vedioPlayer.play(row.playUrl);
    },
    download(row){
      /*      let elemIF = document.createElement('iframe')
            elemIF.src = row.playUrl;
            elemIF.style.display = 'none'
            document.body.appendChild(elemIF);*/

      /*<a href="downloadFileName" target="_blank" download="downloadFileName">下载文件</a>*/

      /*
            let a = document.createElement('a')
            a.download =row.playUrl;
            console.log(a);
            a.click();*/
      console.log(row.playUrl);
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = row.playUrl;
      document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
      // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(()=>{
        iframe.remove();
      }, 5 * 60 * 1000);

    },
    edit(){},
    remove(){},
    changePage(){
      console.log("changePage: %o",this.queryParam.page);
      this.getTable();
    },
    videoInitialize(){
      //console.log("初始化videoJD")
    }
  },
  mounted() {
    //console.log("Docuemt Initialize");
    this.getTable();
  },
  destroyed(){
    //console.log("Docuemt destryed");
  }
}


</script>
<style lang="less">
@import ".././template";
</style>
